<script setup lang="ts">
import { regionData, CodeToText } from "@/utils/chinaArea";
import { ref, defineEmits } from "vue";
const valArea = ref();
const address = ref();
let $emit = defineEmits(["addclick"]);
const onAddclick = () => {
  let title = `${CodeToText[valArea.value[0]]}${CodeToText[valArea.value[1]]}${CodeToText[valArea.value[2]]}`;
  if (address.value) {
    dynamicTags.value.push(`${title}${address.value}`);
  }
  address.value = "";
  $emit("addclick", dynamicTags);
};

const dynamicTags = ref(["浙江省/杭州市/滨江区/长河街道"]);
const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
  $emit("addclick", dynamicTags);
};
</script>

<template>
  <div class="flex">
    <div class="w-[300px] mr-[20px]">
      <el-cascader
        v-model="valArea"
        :options="regionData"
        class="w-full"
        clearable
      />
    </div>
    <el-input
      v-model="address"
      placeholder="请输入详细地址"
      class="mr-[20px] !w-[400px]"
      clearable
    />
    <el-button type="primary" @click="onAddclick">添加</el-button>
  </div>
  <div class="flex w-full gap-2 mt-[10px]">
    <el-tag
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </el-tag>
  </div>
</template>

<style lang="scss" scoped></style>
